<template>
  <div class="set-routine">
    <div class="set-routine-header">
      <div class="set-routine-header-content">
        <h3 class="title">网校小程序，招生学习更便捷</h3>
        <p class="introduce">网校小程序，无缝链接网校与公众号、微信群，让微信运营和网校运营一体化。</p>
        <div>
          <el-button type="primary">立即开通</el-button>
        </div>
      </div>
    </div>
    <div class="set-routine-list">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in listData" :key="index" :span="6">
          <div class="list-item">
            <div class="svg-wrap">
              <svg-icon :icon-class="item.icon" class-name="list-item-svg" />
            </div>
            <h4 class="list-item-title">{{ item.title }}</h4>
            <p class="list-item-content">{{ item.content }}</p>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      listData: [
        {
          title: '快速接入',
          content: '只需一键授权，无需任何开发，即可拥有自己的网校小程序',
          icon: 'jieru'
        },
        {
          title: '自带流量',
          content: '微信9亿月活跃用户，附近的小程序、微信搜索等功能，让你轻松获取流量，抓住客户',
          icon: 'liuliang'
        },
        {
          title: '数据同步',
          content: '小程序的学习、订单记录直接和 EduSoho 主系统打通，无需额外运营成本，轻松管理',
          icon: 'shujutongbu'
        },
        {
          title: '超轻推广',
          content: '流畅体验，降低用户门槛，还能方便用户在微信里快速传播，宣传推广低成本高转化',
          icon: 'tuiguang'
        }
      ]
    }
  }
}
</script>

<style lang="scss">
.set-routine {
  width: 1000px;
  margin: auto;
  margin-top: 20px;
  &-header {
    width: 100%;
    position: relative;
    height: 320px;
    background:url('/src/icons/svg/mobile/background.png');
    background-repeat: no-repeat;
    background-size:cover;
    &-content {
      position: absolute;
      width: 100%;
      margin-left: 82px;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      margin-top: auto;
      margin-bottom: auto;
      height: 146px;
      .title {
        margin-top: 0;
        color: #fff;
        letter-spacing: 1px;
        line-height: 30px;
        top: 67px;
        left: 82px;
      }
      .introduce {
        font-size: 16px;
        color: #fff;
        line-height: 26px;
        letter-spacing: 1px;
        font-weight: lighter;
        width: 434px;
      }
    }
  }
  &-list {
    width: 100%;
    margin-top: 20px;
    .list-item {
      width: 100%;
      text-align: center;
      padding: 36px 31px;
      border: 1px solid #e1e1e1;
      height:286px;
      &-title {
        margin-top: 20px;
        margin-bottom: 10px;
        font-size: 16px;
        color: #313131;
        letter-spacing: 0;
        line-height: 16px;
      }
      &-content {
        font-size: 14px;
        color: #616161;
        letter-spacing: 0;
        line-height: 21px;
        font-weight: 200;
      }
      .svg-wrap {
        display: inline-block;
        width: 64px;
        height: 64px;
        background-color: #409eff;
        border-radius: 50%;
        padding-top: 15px;
        .svg-icon {
          color: #fff;
          width: 32px;
          height: 32px;
        }
      }
    }
  }
}
</style>
